WD PLUS 2020-11 (dashboard)

8. Programowanie obiektowe w JS-ie (Moduł)

8.6. Obliczamy cenę produktu

Zadanie: wdrożenie obliczania ceny

Twoim zadaniem będzie dokończenie metody processOrder tak, aby poprawnie modyfikowała price, zgodnie z tym, jakie opcje są zaznaczone w formularzu. Tak naprawdę większość funkcji jest już gotowa. Jedyne miejsce, w którym będziesz pracować, to pętla drugiego poziomu, gdzie przechodzimy po opcjach danej kategorii. To właśnie tam musisz dodać kod, który będzie sprawdzał, czy dana opcja (optionId) danej kategorii (paramId) jest wybrana w formularzu (formData), a następnie ustalał, czy trzeba zwiększyć lub zwiększyć cenę. Albo... nie robić z nią nic, bo i taka sytuacja może się pojawić. Jeśli np. opcja jest bowiem wybrana i jest określona jako domyślna, to jest już wliczona w cenę startową. Nie musimy wtedy modyfikować price. Podobnie w sytuacji, kiedy odznaczona opcja nie jest opcją domyślną.

Algorytm, który opisaliśmy powyżej, powinien być dla Ciebie wystarczający do napisania dokończenia tej metody. Zacznij od zapisania tego algorytmu w formie komentarzy, może Ci to pomóc w rozplanowaniu pracy.

Po wykonaniu każdego kroku, sprawdź jego poprawność za pomocą console.log. Dzięki temu będzie Ci łatwiej zrealizować to zadanie.

Poznaj debugger

Im większy staje się nasz kod i częściej chcemy sprawdzić, co się w nim właściwie dzieje, tym bardziej męczące staje się korzystanie z console.log. Debugowanie z pomocą tej metody jest możliwe i dotychczas jakoś sobie z tym radziliśmy, ale nie jest to najbardziej komfortowy sposób. Na szczęście przeglądarka Google Chrome udostępnia nam alternatywne narzędzie, które potrafi znacznie przyśpieszyć i ułatwić ten proces – debugger.

Jego znajomość nie jest obowiązkowa, ale daj mu szansę. Jego zalety są przeogromne. Od możliwości zatrzymania działania kodu w dowolnym momencie, poprzez sprawdzanie wartości zmiennych, czy nawet "podglądanie" co dokładnie znajduje się w danym momencie w pamięci.

Zachęcamy do przeczytania krótkiego wprowadzenia w naszej dokumentacji. Jeśli nie masz problemów z angielskim, zachęcamy również do obejrzenia dłuższego materiału z oficjalnego kanału twórców Google Chrome.

Popracuj nad tym zadaniem co najmniej przez pół godziny (a najlepiej godzinę) – jeśli po tym czasie nie uda Ci się go rozwiązać, możesz sprawdzić poniższe podpowiedzi.

Sugestie pomocne w rozwiązaniu zadania

Zaczniemy od małej podpowiedzi. Rozpiszemy Ci punkt po punkcie, co Twój algorytm powinien robić.

  1. Zacznij od ustalenia, czy w formData istnieje właściwość o nazwie zgodnej z nazwą kategorii, a jeśli tak, to czy zawiera ona nazwę sprawdzanej opcji. Jeśli zawiera, to będzie to oznaczać, że opcja jest wybrana.
  2. Jeśli tak jest, to sprawdź, czy opcja ta jest opcją domyślną. Jeśli nie, to musisz zwiększyć price o koszt tej danej opcji.
  3. Jeśli jednak nie jest wybrana, to sprawdź, czy opcja jest domyślna. Jeśli tak, to musisz zmniejszyć price o koszt tej opcji.

Dodatkowe wskazówki:

  • Koniecznie przejrzyj w naszym poradniku informacje dotyczące obiektów i pętli for-in, tablic oraz operatorów logicznych i przypisania.
  • Jeśli mamy obiekt option, który ma właściwość default równą false, to wynikiem !option.default będzie prawda. Jeśli ten obiekt nie ma takiej właściwości, to samo wyrażenie będzie również prawdziwe, ponieważ !undefined jest thruthy.
  • Warunki "opcja zaznaczona i niedomyślna" oraz "opcja niezaznaczona i domyślna" nigdy nie będą jednocześnie spełnione dla tej samej opcji, więc zamiast dwóch bloków if, użyj if oraz else if.
  • Pamiętaj, że thisProduct.priceElem to cena przy guziku dodania do koszyka! Cena w nagłówku produktu nigdy nie będzie się zmieniać! Upewnij się, że patrzysz na właściwą cenę!
Algorytm metody processOrder

Jeśli pierwsza podpowiedź to dla Ciebie za mało, poniżej możesz znaleźć ten sam pomysł, ale rozpisany już za pomocą komentarzy i z kawałkiem dodatkowego kodu.

// for every option in this category
for(let optionId in param.options) {
  // determine option value, e.g. optionId = 'olives', option = { label: 'Olives', price: 2, default: true }
  const option = param.options[optionId];
  console.log(optionId, option);

  // check if there is param with a name of paramId in formData and if it includes optionId
  if(formData[paramId] && formData[paramId].includes(optionId)) {
    // check if the option is not default
    if(????) {
      // add option price to price variable
    }
  } else {
    // check if the option is default
    if(????) {
      // reduce price variable
    }
  }

}
Oczekiwany efekt

Po odświeżeniu strony, tak jak do tej pory, wyświetlą się produkty z ukrytymi opcjami. Kiedy wyświetlimy np. opcje dla pizzy, zobaczymy cenę produktu tuż przy guziku dodawania do koszyka.

Kiedy zaznaczymy którąś z domyślnie niezaznaczonych opcji, cena powinna wzrosnąć o koszt tej opcji. Kiedy odznaczymy którąś z opcji, cena powinna spaść.

W rezultacie, po odznaczeniu wszystkich opcji, cena powinna być niższa od początkowej (która jest wyświetlana w nagłówku produktu). I odwrotnie – po zaznaczeniu wszystkich opcji, cena przy guziku powinna być wyższa niż początkowa.

Zmiana zamawianej ilości nie powinna na razie wpływać na cenę – jeszcze nie napisaliśmy kodu obsługującego tę funkcjonalność.

Uwaga! Nie idź dalej, dopóki metoda processOrder nie będzie dla Ciebie całkowicie jasna. W razie potrzeby zapytaj o pomoc na czacie. Nasza aplikacja pizzerii to na tym etapie kursu naprawdę duże wyzwanie i nie da się jej przejść "na pół gwizdka". Nawet małe braki w zrozumieniu na początku pracy mogą powodować wiele problemów na późniejszych etapach. Dlatego nie śpiesz się, realizuj go na spokojnie, dokładnie czytając cały materiał.

;